<template>
	<div id="app">
		<h1>学生信息系统</h1>
		<button v-if="show" @click="show=false">添加学生</button>
		<div class="ipt" v-else>
			<button @click="handlerAdd">确定添加</button>
			<button @click="show=true">取消添加</button>
			<input type="text" placeholder="名字" v-model="form.name">
			<input type="text" placeholder="年龄" v-model.number="form.age">
			<input type="text" placeholder="分数" v-model.number="form.point">
		</div>
		<div class="sort">
			<button @click="studentList.sort((a,b)=>a.age-b.age)">按年龄排序</button>
			<button @click="studentList.sort((a,b)=>a.point-b.point)">按分数排序</button>
		</div>
		<table border="1" style="border-collapse: collapse;" cellpadding='15'>
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>分数</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in  studentList" :key="item.id">
					<td>{{item.name}}</td>
					<td>{{item.age}}</td>
					<td>{{item.point}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	name: 'App',
	data(){
		return {
			show:true,
			form:{},
			studentList:[
				{
					id:1,
					name:"张三",
					age:18,
					point:88
				},{
					id:2,
					name:"李四",
					age:22,
					point:60
				},{
					id:3,
					name:"多迪",
					age:14,
					point:89
				},{
					id:4,
					name:"张三丰",
					age:102,
					point:75
				}
			]
		}
	},
	methods:{
		handlerAdd(){
			if(this.form.name&&this.form.age&&this.form.point){
				let obj =  Object.assign({},this.form)
				obj.id = Math.random()
				this.studentList.push(obj)
				this.show = true
				this.form = {}
			}else{
				console.log(88);
				alert('请输入完整信息')
			}
			
		}
	}
};
</script>

<style></style>
